<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<h1>异步请求测试</h1>
<input type="text" v-model="name"placeholder="名字">
<input type="text" v-model="age" placeholder="年龄">
<input type="button" value="异步get请求" @click="f1()">
    <hr>
    <input type="text" placeholder="标题" v-model="product.title">
    <input type="text" placeholder="价格" v-model="product.price">
    <input type="text " placeholder="库存"v-model="product.num">
<input type="button" value="异步post请求"@click="f2()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
            el:"body>div",
            data:{
                name:"",
                age:"",
                product:{
                    title:"",
                    price:"",
                    num:"",
                }
            },
            methods:{
                f1(){
                    //发出异步的get请求
                    axios.get("/helloAxios?name="+v.name+"&age="+v.age).then(function (response) {
                        //response代表响应对象,里面装着服务器响应数据
                        //response.data服务器响应的数据
                        alert(response.data)
                    })
                },
                f2(){
                    //发出异步的pos请求
                    axios.post("/postAxios",v.product).then(function (response) {
                        alert(response.data);

                    })
                }

            }
        })
 </script>
</body>
</html>